<template lang="pug">
  .tab-1
    Table.hasTitle-table.beautiful-table(:columns="thead" :data="contact_arr")
      template(slot-scope="{ row, index }" slot="action")
        Button(type="text" size="small" @click="reviseContracter(row)") 修改
        Button(type="text" size="small" @click="deleteContracter(row.id)") 删除
      .clearfix.pl-20.pr-20(slot="footer")
        Button.mr-15(type="info" @click="addContact") 添加联系人
    Modal(v-model="addContactModal" :title="modalTitle")
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90")
        FormItem.mb-5(label="姓名：" prop="name")
          Input(v-model="formValidate.name" placeholder="请输入")
        FormItem.mb-5(label="职位：")
          Input(v-model="formValidate.position" placeholder="请输入")
        FormItem.mb-5(label="电话：" prop="phone")
          Input(v-model="formValidate.phone" placeholder="请输入")
        FormItem.mb-5(label="邮箱：")
          Input(v-model="formValidate.email" placeholder="请输入")
        FormItem.mb-5(label="QQ：")
          Input(v-model="formValidate.qq" placeholder="请输入")
        FormItem.mb-5(label="微信：")
          Input(v-model="formValidate.wechat" placeholder="请输入")
        FormItem.mb-5(label="备注：")
          Input(v-model="formValidate.remark" type="textarea" placeholder="请输入")
      template(slot="footer")
        Button(type="info" @click="handleSubmit('formValidate')") 保存
        Button(@click="addContactModal = false") 取消
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'

export default {
  props: {
    customerId: String,
    contact_arr: {
      type: Array,
      defalt: []
    }
  },
  data () {
    return {
      isCheck: true,
      modalTitle: '添加联系人',
      addContactModal: false,
      thead: [
        {
          title: '姓名',
          minWidth: 100,
          key: 'name'
        },
        {
          title: '职位',
          minWidth: 100,
          key: 'position'
        },
        {
          title: '电话',
          minWidth: 100,
          key: 'phone'
        },
        {
          title: '邮箱',
          minWidth: 100,
          key: 'email'
        },
        {
          title: 'QQ',
          minWidth: 100,
          key: 'qq'
        },
        {
          title: '微信',
          minWidth: 100,
          key: 'wechat'
        },
        {
          title: '备注',
          minWidth: 100,
          key: 'remark'
        },
        {
          title: '操作',
          minWidth: 100,
          slot: 'action'
        }
      ],
      formValidate: {
        id: '',
        name: '',
        position: '',
        phone: '',
        email: '',
        QQ: '',
        Wechat: '',
        Remark: ''
      },
      ruleValidate: {
        name: [
          { required: true, trigger: 'blur' }
        ],
        phone: [
          { required: true, trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
  },
  methods: {
    addContact () {
      this.formValidate = {
        id: '',
        name: '',
        position: '',
        phone: '',
        email: '',
        qq: '',
        wechat: '',
        remark: ''
      }
      this.modalTitle = '添加联系人'
      this.addContactModal = true
    },
    // 新建联系人
    postContacter () {
      HRDCCustomerApi.PostContacter(Object.assign({ customerId: this.customerId }, this.formValidate)).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.addContactModal = false
          this.$refs['formValidate'].resetFields()
          this.$emit('get-list')
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 修改联系人
    reviseContracter (obj) {
      this.modalTitle = '修改联系人'
      this.formValidate = obj
      this.addContactModal = true
    },
    // 删除联系人
    deleteContracter (id) {
      HRDCCustomerApi.DeleteContracter({
        id: id
      }).then(res => {
        if (res.data.success) {
          this.$Message.success(res.data.message)
          this.$emit('get-list')
        } else {
          
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },
    // 保存按钮
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.postContacter()
        } else {
          this.$Message.warning('有必填项未填写！')
        }
      })
    }
  }
}
</script>

<style>

</style>
